<template>
  <div class="platformdata-box">
    <div class="platformdata-title">
      <span class="title-span"> {{ titleName }}</span>
    </div>
    <div class="platformdata-content" v-for="( item,index ) in formData" :key="index">
      <img :src="item.src" alt="">
      <div class="content-biaoti">
        <div class="biaoti-label"> {{ item.label }}</div>
        <div class="biaoti-label">
          <span class="content-count" :style="{'color': item.color}"> {{ item.label=='用户共计'?mapDetail.userTotal:mapDetail.activeUsersTotal }}</span>&nbsp;人
        </div>
      </div>
    </div>
    <div class="platformdata-task">
      <div class="task-biaoti" :style="`background-image: url( ${item.src})`" v-for="( item,index ) in taskData" :key="index">
        <div class="task-label"> {{ item.label }}</div>
        <div class="task-label">
          <span class="task-count" :style="{'color': item.color}"> {{ item.label=='项目任务'?mapDetail.projectTotal:item.label=='事项任务'?mapDetail.matterTotal:mapDetail.fileTotal }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:'PlatformData',
  props: {
    chinaMapIn: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapDetail: {
      type: Object,
      default: () => {
        return {
          userTotal: 0,//用户统计
          activeUsersTotal: 0,//活跃用户,
          fileTotal: 0,//文件数量,
          matterTotal: 0,//事项任务,
          projectTotal: 0,//项目任务,
        }
      }
    },
    titleName:{
      type:String,
      default: () => {
        return '设备数据全知道'
      }
    }
  },
  watch: {
    chinaMapIn: {
      handler() {
      },
      immediate: true,
      deep: true
    },
    mapDetail: {
      handler() {
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      chart: null,
      detail: '',
      formData:[
        {
          src: require("@/assets/screen/yonghugongji.png"),
          label:'用户共计',
          count:42902814,
          color: '#36B2FF'
        },
        {
          src: require("@/assets/screen/huoyueyonghu.png"),
          label:'活跃用户',
          count:81029,
          color: '#8560FC'
        }
      ],
      taskData:[
        {
          src: require("@/assets/screen/zibiao.png"),
          label:'项目任务',
          count:7201,
          color: '#8560FC'
        },
        {
          src: require("@/assets/screen/huangbiao.png"),
          label:'事项任务',
          count:6829,
          color: '#E8E34E'
        },
        {
          src: require("@/assets/screen/lvbiao.png"),
          label:'文件数量',
          count:121745,
          color: '#00DD9C'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.platformdata-box {
  position: relative;
  width: 100%;
  color: #CCDCFF;
  .platformdata-title {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 15px;
    background-image: url("../../../../assets/screen/biaoti.jpg");
    background-size: 100% 100%;
    .title-span{
      position: relative;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #CCDCFF;
      left: 5%;
      top:-10px;
    }
  }
  .platformdata-content{
    margin-top: 5px;
    width: 100%;
    height: calc((100% - 151px)/2);
    background: rgba(86,103,139,0.2);
    border: 1px solid #56678B;
    border-radius: 2px;
    display: flex;
    .content-biaoti{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 5px;
    }
    .biaoti-label{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .content-count{
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
    }
  }
  .platformdata-task{
    margin-top: 5px;
    width: 100%;
    height: 96px;
    background: rgba(86,103,139,0.2);
    display: flex;
    justify-content: space-between;
    .task-biaoti{
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-size: 100% 100%;
      border-radius: 2px;
    }
    .task-label{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .task-count{
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
    }
  }
}
</style>
